<script setup lang="ts">
import { ref } from 'vue'
import type { Introductions } from '@/types/home'
import { loadIntroductionsUsingGet } from '@/services/home'
import { onLoad } from '@dcloudio/uni-app'

const introductionsList = ref<Introductions[]>([])

const loadIntroductionsUsingGetData = async () => {
  const res = await loadIntroductionsUsingGet()
  introductionsList.value = res.data
}

onLoad(() => {
  loadIntroductionsUsingGetData()
})
</script>
<template>
  <view class="Introductions">
    <navigator
      class="introductions-item"
      v-for="item in introductionsList"
      :key="item.id"
      :url="`/pages/introduceDetail/introduceDetail?id=${item.id}`"
    >
      <view class="introductions-title">{{ item.introTitle }}</view>
    </navigator>
  </view>
</template>

<style lang="scss">
.Introductions {
  padding: 30rpx 24rpx;
  background-color: #f6f7f9;
  min-height: 100vh;
  box-sizing: border-box;
}

.introductions-item {
  position: relative;
  background: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx 40rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;

  // 右箭头装饰
  &::after {
    content: '';
    position: absolute;
    right: 40rpx;
    top: 50%;
    width: 12rpx;
    height: 12rpx;
    border-top: 3rpx solid #c0c4cc;
    border-right: 3rpx solid #c0c4cc;
    transform: translateY(-50%) rotate(45deg);
    transition: all 0.25s ease;
  }

  // 点击状态
  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.02);
    background-color: #fafbfc;

    &::after {
      border-color: #909399;
    }
  }
}

.introductions-title {
  font-size: 32rpx;
  color: #2c3e50;
  font-weight: 500;
  line-height: 1.5;
  padding-right: 40rpx;

  // 文本超出显示省略号
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; // 最多显示两行

  // 渐变遮罩效果
  background: linear-gradient(to right, #2c3e50, #34495e);
  -webkit-background-clip: text;
  color: transparent;

  // 确保在小程序中也能正常显示
  @supports not (-webkit-background-clip: text) {
    color: #2c3e50;
  }
}

// 列表项间隔动画
@for $i from 1 through 10 {
  .introductions-item:nth-child(#{$i}) {
    animation: fadeInUp 0.5s ease backwards;
    animation-delay: $i * 0.1s;
  }
}

// 淡入上移动画
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
